<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <div>
          <div class="text-center">
            修改头像
            <el-avatar shape="square" :size="100" :fit="'cover'" :src="squareUrl" />
          </div>
          <ul class="list-group list-group-striped">
            <li class="list-group-item">
              <svg-icon icon="user" />&nbsp;&nbsp;用户名称
              <div class="pull-right">{{ currentUser.uUsername }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="phone" />&nbsp;&nbsp;手机号码
              <div class="pull-right">{{ currentUser.uPhonenum }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="email" />&nbsp;&nbsp;用户邮箱
              <div class="pull-right">{{ currentUser.uEmail }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="date" />&nbsp;&nbsp;用户生日
              <div class="pull-right">{{ formatDate2(currentUser.uBirth) }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="peoples" />&nbsp;&nbsp;所属角色
              <div class="pull-right">{{ currentUser.roles }}</div>
            </li>
          </ul>
        </div>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="基本资料" name="userinfo"><Userinfo :user="currentUser"/></el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwd"><ResetPwd /></el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>

</template>

<script setup>
import {ref} from 'vue'
import store from '@/store'
import requestUtil from '@/util/request'
import Userinfo from './userinfo'
import ResetPwd from './resetPwd'
import {formatDate2} from "@/util/formatDate";

const activeName = ref('userinfo')

const currentUser = ref(store.getters.GET_USERINFO)

const squareUrl = ref(requestUtil.getServerUrl() + 'image/userAvatar/'+currentUser.value.uIcon)
</script>

<style lang="scss" scoped>
.list-group-striped>.list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group-item {
  border-bottom: 1px solid #c7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}
.pull-right {
  float: right!important;
}
:deep .el-card__body{
  height : 230px;
}
:deep .box-card{
  height: 450px;
}
</style>